<template>
  <div class="serve">
    <!-- 头部 -->
    <HeadPersonal></HeadPersonal>

    <!-- enroll -->
    <div class="enroll">
      <!-- enrollPwdOne -->
      <div class="enrollPwdOne">
        <div class="block">
          <div class="enrollPwdOneC">
            <div class="enrollPwdOneCT">
              <img src="../../static/images/enrollPwdOneCT1.png" />
              <p>当前手机号{{phone}}</p>
            </div>
            <div class="enrollPwdOneCZ">
              <input type="text" placeholder="请输入手机验证码" v-model="code" />
              <p v-if="!Verification">{{timer}}s后重新获取</p>
              <p v-if="Verification" style="background:#E70012;color:#fff;" @click="getCode">点击获取</p>
              <div class="clear"></div>
            </div>
            <div class="enrollPwdOneCsub" @click="next">下一步</div>
            <!-- <input type="submit" value="下一步" class="enrollPwdOneCsub"/> -->
            <a href="#" class="enrollPwdOneCD">收不到短信验证码？</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/home.css";
import "@/assets/css/personal.css";
import HeadPersonal from "@/components/headpersonal";
import HomeHooter from "@/components/footer";

export default {
  name: "enroll",
  data() {
    return {
      phone: "",
      code: "",
      timer: 60,
      Verification: false
    };
  },
  components: {
    HeadPersonal,
    HomeHooter
  },
  methods: {
    handler() {
      this.Verification = false;
      let auth_timer = setInterval(() => {
        //定时器设置每秒递减
        this.timer--; //递减时间
        if (this.timer <= 0) {
          this.Verification = true; //60s时间结束还原v-show状态并清除定时器
          clearInterval(auth_timer);
        }
      }, 1000);
    },

    // 获取验证码
    getCode() {
      let id = this.$axios;
      const params = new URLSearchParams();
      params.append("phone", this.$route.query.phone);
      this.$api.member.sendUpdatePasswordCode(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.$message({
            message: result.msg,
            type: "success"
          });
          this.Verification = false;
          this.timer = 60;
        } else {
          this.$message({
            message: result.msg,
            type: "warning"
          });
        }
      });
    },

    // 下一步
    next() {
      this.$router.push({
        name: "enroll-enrollPwdThree",
        query: { phone: this.$route.query.phone, code: this.code }
      });
    }
  },
  mounted() {
    this.phone =
      this.$route.query.phone.substr(0, 3) +
      "****" +
      this.$route.query.phone.substr(7);
  },
  created() {
    this.handler();
  }
};
</script>

<style scoped>
</style>